<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
    <el-checkbox size="small">要求所有输入具有相同的数据类型</el-checkbox>
    <el-form size="small" inline label-position="top" label-suffix=" :" class="topForm">
        <el-form-item label="输出最小值">
            <el-input v-model="data.time" />
        </el-form-item>
        <el-form-item label="输出最大值">
            <el-input v-model="data.time" />
        </el-form-item>
    </el-form>
    <el-form size="small" label-suffix=" :">
        <el-form-item label="输出数据类型" inline>
            <el-select v-model="data.time">
                <el-option value="" />
            </el-select>
            <el-button @click="data.show = !data.show" style="padding: 0 30px;">
                <el-icon>
                    <DArrowRight v-show="!data.show" />
                    <DArrowLeft v-show="data.show" />
                </el-icon>
            </el-button>
        </el-form-item>
        <labelArea v-if="data.show" label="数据类型助手" class="zhushou">
            <div>
                <el-form size="small" inline label-width="auto" label-suffix=" :" style="width: 120px;">
                    <el-form-item label="模式" style="display: flex;align-items: start;padding-top: 2px;">
                        <el-select v-model="data.mode">
                            <el-option value="继承" />
                            <el-option value="内置" />
                            <el-option value="定点" />
                            <el-option value="表达式" />
                        </el-select>
                    </el-form-item>
                </el-form>


                <el-form size="small" inline label-width="auto" label-suffix=" :" class="zhushou1">
                    <el-form-item v-if="data.mode == '继承'">
                        <el-select v-model="data.time">
                            <el-option label="矩形" value="rect"></el-option>
                            <el-option label="圆形" value="circle"></el-option>
                        </el-select>
                    </el-form-item>
                    <template v-if="data.mode == '内置'">
                        <el-form-item style="width: 100px;">
                            <el-select v-model="data.time">
                                <el-option label="矩形" value="rect"></el-option>
                                <el-option label="圆形" value="circle"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="数据类型覆盖">
                            <el-select v-model="data.mode">
                                <el-option label="矩形" value="rect"></el-option>
                                <el-option label="圆形" value="circle"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template v-if="data.mode == '定点'">
                        <el-form-item style="">
                            <el-form size="small" label-width="auto" label-position="left" label-suffix=" :">
                                <el-form-item label="符号性">
                                    <el-select v-model="data.mode">
                                        <el-option label="矩形" value="rect"></el-option>
                                        <el-option label="圆形" value="circle"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="调整尺度">
                                    <el-select v-model="data.mode">
                                        <el-option label="矩形" value="rect"></el-option>
                                        <el-option label="圆形" value="circle"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="数据类型覆盖">
                                    <el-select v-model="data.mode">
                                        <el-option label="矩形" value="rect"></el-option>
                                        <el-option label="圆形" value="circle"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-form-item>
                        <el-form-item label="字长" style="display: flex;align-items: start;padding-top: 2px;">
                            <el-input v-model="data.time" placeholder=""></el-input>
                        </el-form-item>
                    </template>
                    <template v-if="data.mode == '表达式'">
                        <el-form-item>
                            <el-input v-model="data.time" placeholder=""></el-input>
                        </el-form-item>
                    </template>
                </el-form>
            </div>
            <div v-if="data.mode == '定点'" style="width:100%;">
                <FoldBox title="定点详细信息">
                    <el-form size="small" label-width="auto" label-position="left" label-suffix=" :" class="xiangxi">
                        <el-form-item label="可表示的最大值">
                            {{ '32767' }}
                        </el-form-item>
                        <el-form-item label="表数据最大值">
                            {{ '未知' }}
                        </el-form-item>
                        <el-form-item label="表数据">
                            {{ '0.999999999' }}
                        </el-form-item>
                        <el-form-item label="表数据最小值">
                            {{ '未知' }}
                        </el-form-item>
                        <el-form-item label="可表示的最小值">
                            {{ '未知' }}
                        </el-form-item>
                        <el-form-item label="精度">
                            {{ '未知' }}
                        </el-form-item>
                        <el-form-item>
                            <el-button>刷新详细信息</el-button>
                        </el-form-item>
                    </el-form>
                </FoldBox>
            </div>
        </labelArea>
        <el-form-item>
            <el-checkbox v-model="data.time" size="small">锁定输出数据类型设置以防止被定点工具更改</el-checkbox>
        </el-form-item>
        <el-form-item label="整数舍入模式">
            <el-select v-model="data.time">
                <el-option value="" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-checkbox v-model="data.time" size="small">对整数溢出进行饱和处理</el-checkbox>
        </el-form-item>
    </el-form>
</template>

<script setup>
const { data } = defineProps(['data'])

</script>


<style scoped>
.zhushou {
    &>div {
        display: flex;

        &>.el-form {
            &.zhushou1 {
                width: calc(100% - 120px);
                margin-left: 8px;
                display: flex;
            }

            & .el-form-item {
                width: 100%;
                margin: 0;
            }

            &>.el-form-item+.el-form-item {
                margin-left: 8px;
            }
        }
    }

}

.xiangxi {
    &>>>.el-form-item__content {
        justify-content: end;
        max-width: 50%;
    }

    &>>>.el-form-item:last-child {
        position: relative;

        &>>>.el-form-item__content {
            position: absolute;
            top: -32px;
            right: 0;
        }
    }
}
</style>